/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .btn {
        @apply rounded py-2 px-4 text-white text-sm font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-opacity-75;
    }

    .btn-sm {
        @apply rounded py-1 px-2 text-white text-sm font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-opacity-75;
    }

    .btn-blue {
        @apply bg-blue-500 hover:bg-blue-700 focus:ring-blue-400;
    }

    .btn-error {
        @apply bg-red-500 hover:bg-red-700 focus:ring-red-400;
    }

    .btn-secondary {
        @apply bg-gray-500 hover:bg-gray-700 focus:ring-gray-400;
    }

    .btn-primary {
        @apply bg-green-500 hover:bg-green-700 focus:ring-green-400;
    }

    .btn-warning {
        @apply bg-yellow-500 hover:bg-yellow-700 focus:ring-yellow-400;
    }

    .h-bg-blur {
        @apply bg-white bg-opacity-50 backdrop-blur-sm;
    }

    .h-container {
        @apply container bg-white bg-opacity-90 my-10 rounded;
    }
}

/* body {
    @apply overflow-y-auto md:overflow-y-scroll
} */
